<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/jQuery.Gantt/style.css">
</head>
<body>
<div style="width: 600px;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:600px;"></div>
</div>
<script src="lib/jquery-3.5.1.js"></script>
<script src="lib/jQuery.Gantt/jquery.fn.gantt.js"></script>
<script>
    //https://www.jq22.com/jquery-info4701
    let source = [
        {
            name:"Example",
            desc:"Lorem ipsum dolor sit amet.",
            values:[{
                to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",
                desc: "Something",
                label: "Example Value",
                customClass: "ganttRed",
                dataObj: {name: "labbor"}
            }],
        },
        {
            name:"Example",
            desc:"Lorem ipsum dolor sit amet.",
            values:[{
                to:"/Date(1338842000000)/",from:"/Date(1333411200000)/",
                desc: "Something",
                label: "Example Value",
                customClass: "ganttRed",
                dataObj: {name: "labbor"}
            }],
        }
    ];
    $("#main").gantt({
        source:source,
        scale:"weeks",
        minScale:"weeks",
        maxScale:"months",
        onItemClick:function(data){
            alert("Item clicked - show some details");},
        onAddClick:function(dt, rowId){
            alert("Empty space clicked - add an item!");},
        onRender:function(){
            console.log("chart rendered");}});
</script>
</body>
</html>